// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView, Dimensions, TouchableOpacity, Linking} from 'react-native';
import AllStyle from '../../../../style';
import {HeaderTitle} from '../../../../componet/settingComponent/HeaderTitle';
import {CardFold} from '../../../../componet/statisticsComponent/CardFold';
import {SafeAreaView} from 'react-native-safe-area-context';
import {CardItem} from '../../../../componet/settingComponent/CardItem';
import {BrLine} from '../../../../componet/settingComponent/BrLine';
import {BottomButton} from '../../../../componet/settingComponent/BottomButton';
import DatePicker from 'react-native-date-picker';
import {Drawer} from '../../../../componet/Drawer';
import {getDate} from '../../../../utils/DateUtils';
import {getStatement} from '../../../../api/empActual';
import {Toast} from '../../../../utils/Toast';
import {Loading} from '../../../../utils/Loading';

const width = Dimensions.get('window').width;

/**
 * @Description: 导出报表
 * @author TangYong
 * @date 2023/2/9
 */
export class ReportForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url:null,
            visible: false,
            chosenDate: new Date(),
            choseDateName: '',
            dAndMVal: true,
            StartTime: null,
            EndTime: null,
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
    }

    changedAndMVal = (val) => [
        this.setState({dAndMVal: val}),
    ];
    //方法
    onClick = () => {

        if (!this.state.StartTime) {
            Toast.showWarning('开始日期不能为空');
            return;
        }
        if (!this.state.EndTime) {
            Toast.showWarning('结束日期不能为空');
            return;
        }
        if (this.state.EndTime < this.state.StartTime) {
            Toast.showWarning('结束日期不能小于开始日期');
            return;
        }
        let day = (new Date(this.state.EndTime).getTime() - new Date(this.state.StartTime).getTime()) / 1000 / 60 / 60 / 24;
        if (day >= 32) {
            Toast.showWarning('时间范围最多选择一个月');
            return;
        }
        let data = {
            startTime: this.state.StartTime.toString().substring(0, 10),
            endTime: this.state.EndTime.toString().substring(0, 10),
            type: this.state.dAndMVal==true?1:2,
        };
        Loading.show()
        getStatement(data).then(res=>{
            Loading.hidden();
            let {data} =res;
            this.setState({url:data})
            //console.log(data)

        }).catch(err=>{
            Loading.hidden();
            Toast.showWarning(err.toString())
        }).finally(()=>{
            Loading.hidden();
        });
    };
    setChoseDateName = (choseDateName) => {
        this.setState({choseDateName: choseDateName});
        this.setState({visible: true});
    };
    onOk = () => {
        let choseDateName = this.state.choseDateName;
        let _state = this.state;
        _state[choseDateName] = getDate(this.state.chosenDate, 'yyyy-MM-dd') + ' 00:00:00';
        this.setState(_state);
        this.setState({visible: false});
    };
    onCancel = () => {
        this.setState({visible: false});
    };
    setDate = (date) => {
        this.setState({chosenDate: date});
    };

    back = () => {
        this.props.navigation.goBack();
    };

    //DOM
    render() {
        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => {
                        this.back();
                    }} headtitle={'导出考勤报表'}
                    />
                    <ScrollView style={AllStyle.padding15}>
                        <View style={AllStyle.card}>
                            <View style={style.card_top}>
                                <View style={style.top_l}>
                                    <Text style={{fontSize: 16, fontWeight: '500'}}>导出报表</Text>
                                </View>
                                <View style={style.top_r}>
                                    <View style={style.r_container}>
                                        <TouchableOpacity onPress={() => {
                                            this.changedAndMVal(true);
                                        }}>
                                            <View
                                                style={[style.top_r_btnW, this.state.dAndMVal && {backgroundColor: '#fff'}]}>
                                                <Text>每日汇总</Text>
                                            </View>
                                        </TouchableOpacity>
                                        <TouchableOpacity onPress={() => {
                                            this.changedAndMVal(false);
                                        }}>
                                            <View
                                                style={[style.top_r_btnM, this.state.dAndMVal == false && {backgroundColor: '#fff'}]}>
                                                <Text>打卡记录</Text>
                                            </View>
                                        </TouchableOpacity>
                                    </View>

                                </View>
                            </View>
                        </View>
                        <View style={AllStyle.card}>

                            <TouchableOpacity onPress={() => this.setChoseDateName('StartTime')}>
                                <CardItem title={'开始日期'}
                                          value={this.state.StartTime == null ? '未设置' : this.state.StartTime.toString().substring(0, 10)}></CardItem>
                            </TouchableOpacity>
                            <BrLine></BrLine>
                            <TouchableOpacity onPress={() => this.setChoseDateName('EndTime')}>
                                <CardItem title={'结束日期'}
                                          value={this.state.EndTime == null ? '未设置' : this.state.EndTime.toString().substring(0, 10)}></CardItem>
                            </TouchableOpacity>
                        </View>
                        {this.state.url&& <View style={AllStyle.card}>
                            <View style={{paddingTop: 10,paddingBottom:10}}>
                                <View style={style.top_l}>
                                    <Text style={{fontSize: 16, fontWeight: '500'}}>导出成功</Text>
                                </View>
                                <View style={{margin:10,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                                    <TouchableOpacity onPress={()=>{
                                        Linking.openURL(this.state.url)
                                    }}>
                                        <Text style={{color:'#888'}}>
                                            {this.state.url}
                                        </Text>

                                    </TouchableOpacity>
                                </View>

                                <Text style={{color:'#E6A23C'}}>
                                    提示:请点击链接或者复制到浏览器中打开
                                </Text>
                            </View>

                        </View>}

                    </ScrollView>
                </View>
                <BottomButton title={'导出报表'} click={() => {
                    this.onClick();
                }
                }></BottomButton>
                <Drawer visible={this.state.visible} onShow={() => this.onOk()} dismiss={() => this.onCancel()}>
                    <DatePicker
                        style={{width: width}}
                        mode='date'
                        locale="zh_GB"
                        date={this.state.chosenDate}
                        onDateChange={(date) => {
                            this.setDate(date);
                        }}
                    ></DatePicker>
                </Drawer>
            </SafeAreaView>
        );
    }

}

const style = StyleSheet.create({
    //样式
    card_top: {
        marginTop: 15,
        marginBottom: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    top_l: {
        // backgroundColor:'red',
        justifyContent: 'center',
    },
    top_r: {
        //backgroundColor:'red',
        // width: (width - 60) / 2,
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    r_container: {
        backgroundColor: '#DCDFE6',
        flexDirection: 'row',
        padding: 2,
        borderRadius: 5,
    },
    top_r_btnW: {
        // width: 40,
        padding: 5,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,

    },
    top_r_btnM: {
        padding: 5,
        // width: 40,
        height: 30,
        // backgroundColor:'#409EFF',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,

    },
});
